<template>
	<div class="pg-page">
		<div class="title">
			{{title}}
		</div>
		<div class="flex-between mt10">
			<div class="teacherName">
				教师：{{teacherName}}
			</div>
			<div class="flex-center">
				<div class="dtUpdate">
					{{dtUpdate}}
				</div>
				<div class="dateIcon">
					<i class="cubeic-calendar"></i>
				</div>
			</div>
		</div>
		
		<cube-textarea class="content" v-model="content" 
			:maxlength="2000"
			:autoExpand="true" >
		</cube-textarea>			
		
		<div class="btns-bottom flex-align">
			<div class="btn-delete" @click = "onDelete">
				<i class="iconfont icon-shanchuwenjian"></i>
			</div>
			<div class="btn-add" @click = "onAdd">
				<i class="iconfont icon-jiahao"></i>
			</div>
			
		</div>
		<div class="btn-submit" @click = "onSubmit">
			提交
		</div>
		
		<dialog-confirm :visible="visiblePopup" btnText="返回" content="提交成功" :onConfirm="handleConfirm"></dialog-confirm>
		
	</div>	
</template>

<script>
import DialogConfirm from '@/components/DialogConfirm.vue';

export default {
	name:"DiaryEdit",
	components: {
		DialogConfirm
	},
	data(){
		return {
			visiblePopup: false ,//提交确认弹窗显示
			
			title:"专升本",
			teacherName:"龚琼花",
			content:"第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作。刚走出学校，踏上了工作岗位，一切都是那么的新鲜，然而新鲜过后却感到十分困惑——公司里要用的东西学校里都没有学过。然而事实证明我多虑了，那里有和蔼的领导和友好的同事，他们给了我极大的帮忙和鼓励，使自我逐渐有了信心和勇气，能够勇敢的去应对任何挑战。相信自己，我能行的!",
			dtUpdate:"2020-07-02",
		}		
	},
	
	methods:{
		onDelete(){
			console.log("onDelete")
		},
		
		onAdd(){
			console.log("onAdd")
		},
		
		//点击提交按钮
		onSubmit() {
			this.visiblePopup = true;
		},
		//处理弹框确认按钮回调
		handleConfirm() {
			this.visiblePopup = false;
			this.$router.push({name:"diaryList"})
		}
	},	
}
</script>

<style lang="less" scoped>
.pg-page{
	margin:20px ;
	background-color: white;	
	font-size: 12px;
	.title{
		margin-top: 32px;		
		height: 23px;
		font-size: 24px;
		font-weight: 500;
		color: #000000;
		line-height: 13px;
	}
	.teacherName{
		font-size: 15px;		
		font-weight: 400;
		color: #B0B0B0;
		line-height: 47px;
	}
	.dtUpdate{		
		font-size: 12px;		
		font-weight: 500;
		color: #3A3A3A;
		line-height: 36px;
	}
	.dateIcon{
		padding-left: 5px;
		font-size: 18px;
		color: #FFCB5E;
	}
	
	.content{
		height:300px;						
	}
	.btns-bottom{
		margin-top: 20px;		
		.btn-delete,.btn-add{
			width: 84px;
			height: 84px;			
			background: #FFCB5E;
			border-radius: 10px;
			color:white;
			line-height: 84px;
			text-align: center;
			.iconfont{
				font-size: 64px;				
			}
		}		
		.btn-add{
			margin: 0 20px;			
		}		
	}	
	
	.btn-submit{
		margin: auto;
		margin-top:120px;
	}
}	
</style>
